<!--
* @Author: 张昊
* @Date: 2021-12-22 16:44:41
* @LastEditors: 张昊
* @Description: 下拉加载更多
-->

<template>
	<u-transition :show="showTransition" mode="fade-up" duration="2000">
		<view v-if="pullDownFlag">
			<view class="pulldown" v-if="flagIn">
				<u-loadmore status="loading" loading-text="上滑加载" :loadmore-text="loadmoreText" :nomore-text="nomoreText" :isDot="true"></u-loadmore>
			</view>
			<view class="pullno" v-else><u-divider text="联系客服了解更多" textColor="#bcbcbc" lineColor="#ffd8e6" :dashed="true"></u-divider></view>
		</view>
		<!-- 完全没有数据的时候 -->
		<view v-else class="pulldownNo"><u-empty mode="page" text="好像没有数据哦"></u-empty></view>
	</u-transition>
</template>

<script>
export default {
	props: {
		flagIn: {
			type: Boolean | String,
			default: true
		}
	},
	data() {
		return {
			showTransition: false,
			flagInTo: null
		};
	},
	watch: {
		flagIn(newval) {
			// this.flagInTo = newval
		}
	},
	computed: {
		pullDownFlag() {
			return typeof this.flagIn == 'boolean';
		}
	},
	mounted() {
		// this.flagInTo = this.flagIn;
		setTimeout(() => {
			this.showTransition = true;
		}, 500);
	}
};
</script>

<style scoped lang="scss">
.pulldown {
	color: #0087fa;
	font-size: 24rpx;
	margin: 28rpx 0 28rpx 0;
	display: flex;
	justify-content: center;
	.img {
		width: 22rpx;
		height: 22rpx;
	}
}
.pullno {
	color: #ff575e;
	font-size: 24rpx;
	margin: 28rpx 0 28rpx 0;
	// display: flex;
	justify-content: center;
}
.page {
	margin-top: 200rpx;
}
.pulldownNo {
	margin-top: 250rpx;
}
</style>
